<template>
  <div>
    <div class="pd-10">
      <el-row :gutter="10">
        <el-col :span="4">
          <a href="#" class="showItemA">
            <div class="showItemText">
              <p>总文件数</p>
              <p>{{ FileValueCount }}</p>
            </div>
          </a>
        </el-col>
        <el-col :span="4">
          <a href="#" class="showItemA">
            <div class="showItemText">
              <p>昨日上传数</p>
              <p>{{ FileValueYesterdayRegister }}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>

    <div class="pd-10">
      <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入名称" v-model="fileName"></el-input>
      <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-message" placeholder="文件类型"
                v-model="fileType"></el-input>
      <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" icon="el-icon-edit" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData" border stripe v-loading="loading">
      <el-table-column prop="fileId" label="文件编号" width="80">
      </el-table-column>
      <el-table-column prop="fileName" label="文件名称" width="350" fixed="left" fit>
      </el-table-column>
      <el-table-column prop="fileSize" label="文件大小" width="300">
      </el-table-column>
      <el-table-column prop="fileType" label="文件类型" width="300">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.fileType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="filePath" label="文件路径" width="500" fit>
      </el-table-column>
      <el-table-column prop="username" label="上传用户" width="300">
      </el-table-column>
      <el-table-column prop="createDatetime" sortable label="上传日期" width="300" fit>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createDatetime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fileUrl" :formatter="fileUrlFormat" label="访问链接" width="800" fit>
        <template slot-scope="scope">
          <el-link v-bind:href="'http://127.0.0.1:8000'+scope.row.fileUrl" type="primary">
            http://127.0.0.1:8000{{ scope.row.fileUrl }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" onclick="getFileValueDetail(scope.row.fileId)">详情</el-button>
          <!--                    <el-button type="text" size="small">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pd-10">
      <!--          current-page: 当前的页码
                    page-size: 每页的个数
      -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[20 ,40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="文件详情" :visible.sync="DetailsDialogFormVisible">
      <el-form :model="form">
        <el-form-item label="文件编号" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="文件编号" v-model="form.fileId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件名称" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="文件名称" v-model="form.fileName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件大小" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="文件大小" v-model="form.fileSize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件类型" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="文件类型" v-model="form.fileType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件路径" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="文件路径" v-model="form.filePath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所有者" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="所有者" v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传日期" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="上传日期" v-model="form.createDatetime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="访问链接" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="访问链接" v-model="form.fileUrl" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FileValue",
  data() {
    return {
      loginStatus: true,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      FileValueYesterdayRegister: 0,
      FileValueCount: 0,
      total: 0,
      fileName: "",
      fileType: "",
      DetailsDialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        fileId: '',
        fileName: '',
        fileSize: '',
        filePath: '',
        fileType: '',
        username: '',
        fileUrl: '',
        createDatetime: ''
      },
    }
  },
  created() {
    this.load()
    this.FindFileValueCount()
    this.FindFileValueYesterdayRegister()
  },
  methods: {
    load() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindFileValuePage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          fileName: this.fileName,
          fileType: this.fileType
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.fileName = ""
      this.fileType = ""
      this.load()
    },
    fileUrlFormat(row, column) {
      return 'http://127.0.0.1:8000' + row.fileUrl
    },
    getFileValueDetail(fileId) {
      this.form = {
        fileId: '',
        fileName: '',
        fileSize: '',
        filePath: '',
        fileType: '',
        username: '',
        fileUrl: '',
        createDatetime: ''
      }
      this.$axios({
        url: this.$api.FindFileValueDetail,
        method: 'get',
        params: {
          fileId: fileId
        }
      }).then(res => {
        this.form = res.data
        this.DetailsDialogFormVisible = true
      })
    },
    FindFileValueCount() {
      this.$axios({
        url: this.$api.FindFileValueCount,
        method: 'get'
      }).then(res => {
        this.FileValueCount = res.data
      })
    },
    FindFileValueYesterdayRegister() {
      this.$axios({
        url: this.$api.FindFileValueYesterdayRegister,
        method: 'get'
      }).then(res => {
        this.FileValueYesterdayRegister = res.data
      })
    },


  },
}
</script>

<style scoped>

</style>